<%--
  Created by IntelliJ IDEA.
  User: hcy
  Date: 2021/7/10
  Time: 9:27
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="UTF-8">
    <title>登入</title>
    <script src="JS/jquery-1.10.2.js"></script>
    <style>
        html{
            font-family: sans-serif;
            line-height: 1.15;
            -webkit-text-size-adjust: 100%;
            -ms-text-size-adjust: 100%;
            -ms-overflow-style: scrollbar;
            -webkit-tap-highlight-color: rgba(0,0,0,0);
        }
        body{
            margin: 0;
            color: rgba(0,0,0,.65);
            font-size: 14px;
            font-family: -apple-system,BlinkMacSystemFont,Segoe UI,PingFang SC,Hiragino Sans GB,Microsoft YaHei,Helvetica Neue,Helvetica,Arial,sans-serif;
            font-variant: tabular-nums;
            line-height: 1.5;
            background-color: #fff;
            font-feature-settings: "tnum";
        }
        #log{
            background-image: url("/examproject/manage/images/demo2.png");
            min-width: 1200px;
            height: 100%;
            min-height: 721px;
            background-size: cover;
            background-repeat: no-repeat;
            position: relative;
        }
        .main-body{
            width: 920px;
            height: 600px;
            top: 50%;
            left: 50%;
            position: absolute;
            -webkit-transform: translate(-50%,-50%);
            -moz-transform: translate(-50%,-50%);
            -ms-transform: translate(-50%,-50%);
            -o-transform: translate(-50%,-50%);
            transform: translate(-50%,-50%);
            overflow: hidden;
            box-shadow: 0 0 15px rgb(0 138 233/15%);

        }
        .qr-code{
            float: left;
            width: 224px;
            height: 600px;
            border-radius: 10px 0 0 10px;
            background: url("/examproject/manage/images/demo2.png") center center no-repeat;
            position: relative;
            padding: 0 78px;
        }
        .qr-code .login-title{
            font-size: 28px;
            color: #fff;
            letter-spacing: 9px;
            margin: 150px 0 80px 0;
        }
        .new-login{
            width: 420px;
            height: 500px;
            padding: 50px 60px;
            background-color: #fff;
            position: relative;
            float: left;
            border-radius: 0px 10px 10px 0px;
            background-color: white;
        }
        #dr{
            color: #1890ff;
            font-weight: 500;
            font-size: 24px;
        }
        #aun{
            width: 152px;
            height: 32px;
            padding: 20px 16px;
            border-bottom: 2px solid #1890ff;
        }
        #xian{
            position:relative;
            width: 420px;
            height: 73px;
            border-bottom: 1px solid #E8E8E8;
            margin-bottom: 32px;
        }
        #zhanghao{
            width: 419px;
            height: 53px;
            position: relative;
            margin-top: 32px;
            border-radius: 5px 5px 5px 5px;
        }

        #mima{
            width: 419px;
            height: 53px;
            border-radius: 5px 5px 5px 5px;
            margin-top: 32px;
        }

        #zhagw{
            margin-top: 32px;
            font-size: 14px;
            width: 419px;
            height: 60px;
        }

        #iconqiye{
            width: 18px;
            height: 18px;
            display: inline-block;
            vertical-align: -4px;
            overflow: hidden;
            fill: currentColor;
            color: #d2cfcf;
        }

        #iconzhanghaoanquan{
            width: 18px;
            height: 18px;
            display: inline-block;
            vertical-align: -4px;
            overflow: hidden;
            fill: currentColor;
            color: #d2cfcf;
        }

        #fz{
            position: absolute;
            margin-top: 15px;
            margin-left: 20px;
        }
        #suo{
            position: absolute;
            margin-top: 15px;
            margin-left: 20px;
        }

        #yx{
            width: 362px;
            height: 42px;
            padding: 5.5px 10px 5px 46px;
            font-size: 15px;
            text-align: inherit;
            border: 1px solid #d9d9d9;
            border-radius: 5px 5px 5px 5px;
        }
        #yx:hover{
            border-color: #40a9ff;
        }
        #yx:focus{
            border-color: #80bdff;
            outline:0;
        }
        #m2{
            width: 362px;
            height: 42px;
            padding: 5.5px 10px 5px 46px;
            font-size: 15px;
            text-align: inherit;
            border: 1px solid #d9d9d9;
            border-radius: 5px 5px 5px 5px;
        }
        #m2:hover{
            border-color: #40a9ff;
        }
        #m2:focus{
            border-color: #80bdff;
            outline:0;
        }
        #qsr{
            font-size: 12px;
            float: right;
            position: relative;
            top: 2px;
            display: none;
            color: #F5222D;
        }
        #dlu{
            text-decoration: none;
            color: #1890ff;
        }
        #iconzhengyan_huaban1{
            width: 18px;
            height: 18px;
            display: inline-block;
            vertical-align: -4px;
            overflow: hidden;
            fill: currentColor;
            color: #d2cfcf;
        }
        #mmcw{
            font-size: 12px;
            float: right;
            position: relative;
            top: 2px;
            display: none;
            color: #F5222D;
        }
        #wjmm{
            float: right;
        }
        #wjmm a{
            text-decoration: none;
            color: #999999;
        }
        #wjmm a:hover{
            color: #40a9ff;
            text-decoration: underline;
        }
        #zc{
            margin-left: 80px;
        }
        #zc a{
            text-decoration: none;
            color: #999999;
        }
        #zc a:hover{
            color: #40a9ff;
            text-decoration: underline;
        }
        #dag{
            height: 20px;
            width: 20px;
        }
        #dagk{
            height: 15px;
            width: 15px;
        }
        #dag{
            top:10px;
        }
        #ac{
            width: 10px;
            height: 15px;
            position: absolute;
            float: left;
            margin-left: 20px;
        }
        #zhou{
            margin-left: 48px;
            color: #000000A6;
        }
        #dla{
            background-color: #34acff;
            width: 100%;
            height: 50px;
            color: #fff;
            font-size: 20px;
            margin-top: 10px;
            border-radius: 5px 5px 5px 5px;
            border-color: #34acff;
            cursor: pointer;
        }
        #zhanghao2{
            width: 100px;
            height: 53px;
            position: relative;
            margin-top: 32px;
            border-radius: 5px 5px 5px 5px;
        }
        #yzmd{
            position: absolute;
            margin-left:268px;
            float: left;
            height:42px;
            width:100px
        }
        #yzm{
            float: left;
            width: 200px;
            height: 42px;
            padding: 5.5px 10px 5px 46px;
            font-size: 15px;
            border: 1px solid #d9d9d9;
            border-radius: 5px 5px 5px 5px;
        }

        #yzm:hover{
            border-color: #40a9ff;
        }
        #yzm:focus{
            border-color: #80bdff;
            outline:0;
        }
    </style>
    <script>

    </script>
</head>
<body>
<div id="log">
    <div class="main-body">
        <div class="qr-code">
            <div class="login-title">
                欢迎进入<br>后台管理平台
            </div>
        </div>
        <div class="new-login">
            <div id="xian">
                <div id="aun">
                    <span id="dr"><a href="javascript:;" id="dlu">账号密码登录</a></span>
                </div>
            </div>
            <form action="/examproject/man/login" method="post" onsubmit="return pd(this)">
                <div id="zhanghao">
                <span id="fz"><svg id="iconqiye" viewBox="0 0 1024 1024">
                    <path d="M991.154 442.976L602.927 38.893C578.804 13.806 546.557 0 511.996 0s-66.81 13.804-90.929 38.893L32.841 442.976c-40.061 41.71-34.904 77.76-28.281 92.817 4.721 10.685 20.656 40.054 66.559 40.054h56.904V886.7c0 70.576 50.683 137.027 122.71 137.027H416.003v-73.042l0.002-255.935c0-35.267-5.343-54.92 30.686-54.92h130.614c36.031 0 30.686 19.654 30.686 54.92v328.981H773.26c72.029 0 122.715-66.45 122.715-137.027V575.849h56.9c45.905 0 61.843-29.369 66.561-40.054 6.62-15.059 11.778-51.11-28.281-92.819z"></path>
                </svg></span>
                    <input type="text" name="name" placeholder="请输入企业帐号" id="yx" />
                </div>
                <div id="qsr">请输入企业帐号</div>
                <div id="mima">
                <span id="suo"><svg id="iconzhanghaoanquan" viewBox="0 0 1024 1024">
                    <path d="M845.552 430.624h-71.848V262.816C773.704 122.288 659.968 8 520.04 8c-139.944 0-253.8 114.288-253.8 254.832v167.8h-71.784c-34.616 0-62.672 28.16-62.672 62.928V953c0 34.824 28.064 63.008 62.672 63.008h651.16c34.616 0 62.6-28.184 62.6-63.008V493.56c0-34.776-28.048-62.936-62.664-62.936zM555.216 735.248v100.32a8.28 8.28 0 0 1-8.208 8.264h-53.88a8.32 8.32 0 0 1-8.272-8.256V735.248c-25.312-13-42.84-39.056-42.84-69.592 0-43.208 34.928-78.36 77.968-78.36 43.096 0 78.04 35.144 78.04 78.344 0.048 30.552-17.48 56.608-42.808 69.608z m121.128-304.624h-312.64V266.976c0-86.56 70.208-157.056 156.392-157.056s156.256 70.496 156.256 157.056v163.648h-0.008z m0 0"></path>
                </svg></span>
                    <input type="password" name="pass" placeholder="请输入密码" id="m2"/>
                </div>
                <div id="mmcw">账号或密码错误，请检查</div>
                <div id="zhanghao2">
                <span id="fz"><svg id="iconqiye" viewBox="0 0 1024 1024">
                    <path d="M517.094527 1024c-153.345274 0-438.129353-228.234826-438.129353-444.242786V167.60995c0-10.189055 8.151244-17.830846 18.849751-18.340298l24.963184-0.509453c1.018905 0 98.324378-2.037811 198.686568-41.775124C423.864677 66.228856 490.093532 19.359204 491.112438 18.849751l14.774129-10.189054c3.056716-2.037811 7.132338-3.566169 11.20796-3.56617 4.075622 0 8.151244 1.018905 11.207961 3.56617l14.774129 10.698507c0.509453 0.509453 67.247761 47.379104 170.157214 88.135323 100.362189 39.737313 197.667662 41.775124 198.686567 41.775125l24.453731 0.509452c10.189055 0 18.849751 8.151244 18.849752 18.340299v412.147264c0 215.498507-284.78408 443.733333-438.129354 443.733333z m370.881592-808.501493c-37.699502-3.056716-117.174129-12.736318-199.196019-45.341293-84.569154-33.114428-146.212935-70.304478-171.685573-87.116418-25.472637 16.302488-87.116418 54.00199-171.685572 87.116418-82.021891 32.604975-160.987065 42.284577-199.19602 45.341293v364.258707c0 169.138308 248.103483 376.485572 370.881592 376.485572 47.379104 0 140.099502-38.718408 230.78209-123.287562 87.625871-81.512438 140.099502-176.270647 140.099502-253.19801V215.498507z m-406.03383 433.544279c-6.113433 6.622886-14.774129 10.189055-23.944279 10.189055-9.170149 0-17.321393-3.566169-23.944279-10.189055l-101.381094-101.890547a33.827662 33.827662 0 0 1 0-47.888557c13.245771-13.245771 34.133333-13.245771 47.379104-0.509453l0.509453 0.509453 77.436816 77.946268 195.120398-196.648756c12.736318-13.245771 34.133333-13.245771 47.379104-0.509453l0.509453 0.509453c13.245771 13.245771 13.245771 34.642786 0 47.888557l-219.064676 220.593035z"></path>
                </svg></span>
                    <input type="text" name="code" placeholder="请输入验证码" id="yzm" />
                    <div id="yzmd" onclick="yzm()">获取验证码</div>
                </div>
                <div id="zhagw">
                    <span id="wjmm"><a href="/examproject/nologin/getpass2.jsp">忘记密码？</a></span>
                </div>
                <div id="dran">
                    <button id="dla" type="submit" >登 录</button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
    function yzm() {
        code = "";
        var sjs = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'a', 'b', 'c', 'd',
            'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p',
            'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z');
        for (var i = 0; i < 4; i++) {
            code += sjs[Math.floor(Math.random() * 36)];
        }
        var yzm1 = document.getElementById("yzmd");
        yzm1.style.color = "green";
        //设置字体间距
        yzm1.style.letterSpacing = "5px";
        //设置字体样式
        yzm1.style.fontFamily = "fixedsys";
        yzm1.innerHTML = code;
    }
    function pd() {
        var yzm=document.getElementById("yzm").value;
        var yzm1=document.getElementById("yzmd").innerText;
        if(yzm!=yzm1){
            alert("验证码错误");
            code = "";
            yzm.innerHTML="";
            var sjs = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'a', 'b', 'c', 'd',
                'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p',
                'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z');
            for (var i = 0; i < 4; i++) {
                code += sjs[Math.floor(Math.random() * 36)];
            }
            var yzm1 = document.getElementById("yzmd");
            yzm1.style.color = "green";
            //设置字体间距
            yzm1.style.letterSpacing = "5px";
            //设置字体样式
            yzm1.style.fontFamily = "fixedsys";
            yzm1.innerHTML = code;
            return false;
        }
        return true;
    }
</script>
</body>
</html>
